<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>雄安保府酒业</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">

    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">

<!--            <li class="nav-item">-->
<!--                <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>-->
<!--            </li>-->
        </ul>

        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="/index"><i class="fas fa-home"></i>主页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/login"><i class="fas fa-sign-out-alt"></i>退出登录</a>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="/index" class="brand-link">
            <img src="/favicon.ico" alt="AdminLTE Logo" class="brand-image  elevation-3"
                 style="opacity: 0.9">
            <span class="brand-text font-weight-light">雄安保府酒业</span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar user panel (optional) -->
<!--            <div class="user-panel mt-3 pb-3 mb-3 d-flex">-->
<!--                <div class="image">-->
<!--                    <img src="../dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">-->
<!--                </div>-->
<!--                <div class="info">-->
<!--                    <a href="#" class="d-block">Alexander Pierce</a>-->
<!--                </div>-->
<!--            </div>-->

            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->
                    <li class="nav-item">
                        <a href="/userList" class="nav-link">
                            <i class="nav-icon fas fa-users-cog"></i>
                            <p>
                                用户管理
                            </p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="/orderList" class="nav-link">
                            <i class="nav-icon fas fa-users-cog"></i>
                            <p>
                                订单管理
                            </p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="/probabilityList" class="nav-link">
                            <i class="nav-icon fas fa-users-cog"></i>
                            <p>
                                中奖概率设置
                            </p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="/activeTimeList" class="nav-link">
                            <i class="nav-icon fas fa-users-cog"></i>
                            <p>
                                活动设置
                            </p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="/dailyLimitList" class="nav-link">
                            <i class="nav-icon fas fa-users-cog"></i>
                            <p>
                                每日奖品上限设置
                            </p>
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a href="/shareMsgList" class="nav-link">
                            <i class="nav-icon fas fa-users-cog"></i>
                            <p>
                                分享文案设置
                            </p>
                        </a>
                    </li>
                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
<!--        <div class="content-header">-->
<!--            <div class="container-fluid">-->
<!--                <div class="row mb-2">-->
<!--                    <div class="col-sm-6">-->
<!--                        <h1 class="m-0 text-dark">欢迎页</h1>-->
<!--                    </div>&lt;!&ndash; /.col &ndash;&gt;-->
<!--                </div>&lt;!&ndash; /.row &ndash;&gt;-->
<!--            </div>&lt;!&ndash; /.container-fluid &ndash;&gt;-->
<!--        </div>-->
        <!-- /.content-header -->
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card card-primary card-outline">
                            <div class="card-header">
                                <h3 class="card-title">分享文案设置</h3>
                                <div class="card-tools">
                                    <div class="layui-upload">
                                        <button type="button" class="layui-btn" id="test1">上传图片</button>
                                        <div class="layui-upload-list">
                                            <img class="layui-upload-img" id="demo1">
                                            <p id="demoText"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <table id="shareMsgTable" lay-filter="shareMsgTable"></table>
                                <script type="text/html" id="barDemo">
                                    <a class="layui-btn layui-btn-primary layui-btn-xs"  lay-event="detail">编辑</a>
                                </script>
                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                    <!-- /.col-md-6 -->
                </div>
                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
    </div>


    <footer class="main-footer">
        <strong>Copyright &copy; 2014-2019 <a href="">雄安保府酒业</a>.</strong>
        All rights reserved.
        <div class="float-right d-none d-sm-inline-block">
            <b>Version</b> 1.0
        </div>
    </footer>
</div><script type="text/html" id="img">
    <img src="{{d.img}}" style="width: 28px; height: 28px">
</script>>


<script src="../com.js"></script>



<script type="text/javascript">
    layui.use('upload', function() {
        var $ = layui.jquery
            , upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: 'back/upload'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                if (res.code == 200){
                    var imgurl = res.data;
                    //调用修改接口
                    doUpdate(1, "", imgurl, "");
                } else{
                    return layer.msg('上传失败，原因:' + res.msg);
                }
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    });

    var table = layui.table;
    //第一个实例
    table.render({
        elem: '#shareMsgTable'
        , height: 680
        , url: '/back/getShareMsg' //数据接口
        , page: false //开启分页
        , cols: [[ //表头
            {field:'id', title:'id'}
            ,{field:'title', title:'标题'}
            ,{field:'img', title:'图片链接', templet: '#img'}
            ,{field:'content', title:'描述($**$代表用户昵称所在的位置)'}
            ,{fixed: 'right',title:'操作', width: 165, align:'center', toolbar: '#barDemo'}
        ]]
    });
    //监听行工具事件
    table.on('tool(shareMsgTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
            ,layEvent = obj.event; //获得 lay-event 对应的值
        if(layEvent === 'detail'){
            $.ajax({
                url: "/user/shareMsg",
                method: "get",
                data: data,
                dataType: "json",
                success: function (data) {
                    layer.open({
                        type: 1
                        , title: '修改文案'
                        , area: ['390px', '450px']
                        , shade: 0
                        , maxmin: true
                        , content: '<div style="padding: 50px;   font-weight: 300;">' +
                            '  <div class="layui-form-item">\n' +
                            '    <label class="layui-form-label">标题</label>\n' +
                            '    <div class="layui-input-block">\n' +
                            '      <input type="text" id="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" value=' + data.data.title + '>\n' +
                            '    </div>\n' +
                            '  </div>\n' +
                            '  <div class="layui-form-item layui-form-text">\n' +
                            '    <label class="layui-form-label">描述</label>\n' +
                            '    <div class="layui-input-block">\n' +
                            '      <textarea placeholder="请输入描述" id="content" class="layui-textarea" rows="8"  >' + data.data.content + '</textarea>\n' +
                            '    </div>\n' +
                            '  </div></div>'
                        , btn: ['提交', '关闭'] //只是为了演示
                        , yes: function () {
                            var title=$("#title").val();
                            var content=$("#content").val();
                            var data={"title":title,"content":content,"id":1};
                            $.ajax({
                                url: "/back/updateShareMsg",
                                method: "post",
                                data: data,
                                dataType: "text",
                                success:function(data){
                                    alert("修改成功")
                                },
                                error:function (err) {
                                    alert("系统异常"+err);
                                }
                            })
                                .always(function( xhr, status ) {
                                    window.location.reload();
                                });
                        }
                        , btn2: function () {
                            layer.closeAll();
                        }
                        , zIndex: layer.zIndex //重点1
                        , success: function (layero) {
                            layer.setTop(layero); //重点2
                        }
                    });
                    console.log(data);
                },
                error: function (data) {
                    alert("异常")
                }
            });
        } else{
            layer.msg('其他操作');
        }
    });
    //监听单元格编辑
    table.on('edit(shareMsgTable)', function(obj){
        var value = obj.value //得到修改后的值
            ,data = obj.data //得到所在行所有键值
            ,field = obj.field; //得到字段
        var managerAccount = localStorage.getItem("managerAccount");
        if (managerAccount == null || managerAccount == ''){
            alert("身份验证出现错误，请重新登陆");
            window.location.href="/login";
        }else{
            if ('title' == field){
                doUpdate(data.id, value, data.img, data.content);
            } else if('content' == field){
                doUpdate(data.id, data.title, data.img, value);
            }else{
                doUpdate(data.id, data.title, data.img, data.content);
            }
        }
    });

    function doUpdate(id, title, img, content) {
        $.ajax({
            url: "/back/updateShareMsg",
            data: {
                "id" : id
                ,"title": title
                ,"img": img
                ,"content": content
            },
            type: "POST",
        })
            .done(function( result ) {
                alert(result);
            })
            .fail(function( xhr, status, errorThrown ) {
                alert( "Sorry, there was a problem!" );
                console.log( "Error: " + errorThrown );
                console.log( "Status: " + status );
                console.dir( xhr );
            })
            .always(function( xhr, status ) {
                window.location.reload();
            });
    }
    function openInsert() {

    }
</script>
</body>
</html>
